<template>
  <div class="back-white">
    <div>
      <page-title>日志列表</page-title> 
    </div>
    <div class="search-box"> 
      <el-input class="search-input" v-model="keywordSearch" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="subSeach">搜索</el-button> 
      <div class="list-state">
        状态：
        <el-select @change="selectChange" v-model="optionsValue" placeholder="请选择" >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="float-right">
        总计{{postForm.total}}条数据 
      </div> 
    </div>  
    <div class="content clear-both "> 
      <div class="main-box"> 
        <div class="group-list clear-both" v-for="(item,index) in artDataList" :key='index'>
          <div class="left-box float-left"> 
            <div class="header">
              <div class="head-img">
                  <img :src="item.author_head" alt="">
              </div>  
              <div class="text-box">
                <div class="name">{{item.author_name}}</div>
                <div class="date-time">{{item.create_at}}</div>
              </div>
            </div>  
            <div class="art-content-box">
              <div class="main-text">
                {{item.content}}
              </div>
              <div class="main-img clear-both" v-if="item.pics">
                <p class="img-item float-left" v-for="(it,idx) in item.pics" :key="idx">
                  <el-image :src="it" lazy></el-image>
                </p>  
              </div>
            </div>
            <div class="footer-text">
              <p class="topic" ><span>#</span>{{item.topic}}；&nbsp;&nbsp;&nbsp;</p>
              <span>{{item.looked_cnt}} 查看 </span>；&nbsp;&nbsp;&nbsp;
              <span>{{item.reply_cnt}} 回复</span>
            </div>                    
          </div>
            
          <div class="right-box float-left text-center"> 
            <!-- <div class="text-center" >
              <i class="el-icon-s-flag"></i>
            </div>  -->
            <el-button type="primary" class="btn"  @click.stop="toEdit(item)">编辑</el-button>
            <el-button type="primary" class="btn last-btn"  @click="passDown(1,item,'')" v-if="item.recommended==0">推荐</el-button>
            <el-button type="primary" class="btn last-btn"  @click="passDown(0,item,'')" v-if="item.recommended==1">取消推荐</el-button>
            <el-button type="success" class="last-btn"  @click="passDown(1,item,'pass')" v-if="item.review==0">审阅</el-button>
            <el-button type="" class="last-btn" @click="deleteArt(item)">删除</el-button> 

          </div>
        </div> 
        


      </div>
      <div class="text-center" v-if="artDataList.length==0">暂无数据</div> 
    </div>
    <div class="pagination text-center"> 
        <el-pagination 
          @current-change="pageChange" 
          layout="prev, pager, next"
          :total="postForm.total">
        </el-pagination>
    </div>
    <!--修改详情-->
    <el-dialog title="编辑问答"  center :visible.sync="dialogFormVisible" width="750px">
        <el-form :model="editUserInfo">
          <el-form-item label="问答标题" label-width="100px">
              <el-input 
              type="textarea"
              :rows="3"
              placeholder="请输入问答标题"  
              class="edit-input" 
              v-model="editUserInfo.title" 
              autocomplete="off">
              </el-input>
          </el-form-item>
          <el-form-item label="日志内容" label-width="100px">
              <el-input 
              type="textarea" 
              placeholder="请输入日志内容"  
              class="edit-input content-input" 
              v-model="editUserInfo.content" 
              autocomplete="off">
              </el-input>
          </el-form-item>  
        </el-form> 
        <div style="margin-top:10px;">
          <update-img  @clearImg="clearImg" :imgUrl="item" :index="index" v-for="(item,index) in editUserInfo.pics" :key="index"></update-img>
          <update-img  @change="addImgEvent" v-if="editUserInfo.pics.length<9"></update-img>  
        </div> 
              
        <div slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
            <el-checkbox v-model="editUserInfo.checked">设为推荐</el-checkbox>
            <el-button type="primary" @click="adminSave">保存</el-button>
        </div>
    </el-dialog> 
  </div>
</template>
<script >
  import * as api from './../../../api/api';
  export default {
    data(){
      return { 
        keywordSearch:'', 
        stateOptions: [{
          value: '2',
          label: '全部'
        },{
          value: '0',
          label: '待审核'
        },{
          value: '1',
          label: '已审核'
        }],
        optionsValue: '2',
        dialogFormVisible:false,
        editUserInfo:{
          title:'',
          content:'',
          checked:'',
          article_id:'',
          pics:[],
        },
        artDataList:[], 
        postForm:{
          size:20,
          page:1,
          kind:1, 
        },

        detailVisible:false,
        detailData:{},
      }
    },
    created(){
      this.getPhotowallListData();
    },
    methods:{
      subSeach(){ 
        if(this.keywordSearch){
          this.postForm={
            size:20,
            page:1,
            kind:1, 
          };
          this.getPhotowallListData();
        }else{
          this.$message({
            showClose: true,
            message: '请输入关键字',
            type: 'warning'
          });
        }   
      },
      //选择状态
      selectChange(e){ 
        this.optionsValue=e;
        this.getPhotowallListData();
      },
      //编辑
      toEdit(item){
        this.dialogFormVisible=true;
        this.editUserInfo={
          title:item.title,
          content:item.content,
          checked:item.recommended==1?true:false,
          article_id:item.art_id,
          pics:item.pics?item.pics:[],
        }
      },
      adminSave(){
        let vm = this;
        if(!vm.editUserInfo.content){
          vm.$message('标题不能为空');
          return;
        }
        let body={
          recommended:vm.editUserInfo.checked?1:0,
          title:vm.editUserInfo.title,
          article_id:vm.editUserInfo.article_id,
          content:vm.editUserInfo.content,
          pics:vm.editUserInfo.pics,
        }
        api.questionEdit(body).then(res=>{
          if(res.data.code==300000){
            vm.getPhotowallListData();
            vm.dialogFormVisible=false;
          }
        });
      }, 
      getPhotowallListData(){ //获取列表数据
        let vm = this;
          vm.postForm.content=vm.keywordSearch;
          vm.postForm.review=vm.optionsValue;
          vm.artDataList=[];
          api.getArtList(vm.postForm).then(res=>{  
            let resData=res.data.data;
            if(res.data.code==300000&&resData){
              if(resData.data){
                vm.artDataList=resData.data;
              } 
              vm.postForm.page=resData.info.page_num;
              vm.postForm.total=resData.info.total;
            }
          })
      },
      // 当前页数
      pageChange(e){ 
        this.postForm.page=e; 
        this.getPhotowallListData();
      },   

      //查看日志详情
      fetchArtDetail(item){
        let vm = this; 
        api.getArtDetail({article_id:item.article_id}).then(res=>{
          if(res.data.code==300000){
            vm.detailVisible=true;
            // console.log(res.data.data);
            vm.detailData=res.data.data;
          }
        })
      },

      //审阅视频
      passDown(val,item,type){
        let vm = this;
        let body={
          recommended:0,
          review:val,
          topic_id:item.topic_id,
          article_id:item.art_id,
        };
        if(type=='pass'){
          if(val==1){
            body.review=1; 
            api.editArtItem(body).then(res=>{
              item.review=1;  
            });
          }
        }else{
          body.recommended=val; 
          body.review=1; 
        }
        api.editArtItem(body).then(res=>{
          vm.getPhotowallListData(); 
        });
        
      }, 
      //删除
      deleteArt(item){
        let vm =this;
        this.$confirm('确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteArtItem({article_id:item.art_id}).then(res=>{
            vm.getPhotowallListData(); 
          });
        }).catch(() => {

        }); 
      },
      //删除上传的图片
      clearImg(index,item){
          // this.form.imgUrl='';
        let vm = this;
        api.deletePhoto({art_id:vm.editUserInfo.article_id,link:item}).then(res=>{
          if(res.data.code==300000){
            vm.editUserInfo.pics.splice(index,1)
          }
        }); 
      },
      //上传图片
      addImgEvent(val){  
          this.editUserInfo.pics.push(val); 
      },

    }
  }
</script>
<style lang="scss" scoped>
    .back-white{
      background:#fff;
    }
    .search-box{
      padding:20px;
      .search-input{
        width:200px !important;
      }
      .list-state{
        display:inline-block;
        margin-left:20px;
      }
    } 

    .main-box{
      padding:20px;
      background:#fff;
      .group-list{
        width:100%;
        border-bottom:1px solid #EBEBEB;  
        padding:10px 6px 30px;
        position: relative;
        // cursor: pointer;
        &:hover{
          background:#E8F3FE;
        }
        .left-box{
          color:#909399; 
          width:88%; 
          .header{
            width:100%;
            
            .head-img{
              width:50px;
              height:50px;
              display:inline-block;
              margin-right:10px;
              vertical-align: sub;
              img{
                border-radius: 50%;
                width:100%;
                height:100%;
              }
            }
            .text-box{
              display: inline-block;
              .name{
                font-size:16px;
                color:#000;
              }
              .date-time{
                font-size:14px;
                color:#909399;
              }
            }
          } 
          .art-content-box{
            font-size: 14px;
            padding:12px 0; 
            color:#333;
            margin:20px 0;
            .main-text{

            }
            .main-img{
              .img-item{
                width:150px;
                height:150px; 
                margin-right:15px;
                margin-bottom:10px;
                display: flex;
                justify-content: center;
                align-items: center;
                &:last-child{
                  margin-right:0;
                }
              }
            }
          }
          .footer-text{
            position: absolute;
            bottom:20px;
            left:10px;
            color:#666;
            .topic{
              display:inline-block;
              span{
                color:#F56C6C;
                font-size:20px;
              }
            }
            span{
              display:inline-block;
              margin-right:10px;
            }
          }
        }
        .right-box {
          width:12%; 
          .btn{
            margin-top:10px; 
          }
          .last-btn{
            margin-top:10px;
            margin-left:0;
          }
          .el-icon-s-flag{
            color:#67C23A;
            margin-top:10px;
            font-size:20px;
          }
        }
      }
    }

    .pagination{
      display:block;
      width:100%;
      padding-bottom:60px;
      margin-top:20px;
    }

</style>